import { debounce } from '../../common/utils/utils.js'

const template = document.createElement("template");

template.innerHTML = /*html*/ `
<style>
  :host {
    display: block;
    font-size: 13px;
    width: 100%;
    height: 100%;
  }
  :host *{
    box-sizing: border-box;
  }
  /* 滚动槽 */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    border-radius: 3px;
    background: transparent;
    -webkit-box-shadow: inset 0 0 5px transparent;
  }
  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(0,0,0,0.12);
    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
  }
  .notes-box{
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .editor{
    padding: 10px;
    width: 100%;
    height: calc(100% - 30px);
    line-height: 1.7em;
    overflow-y: auto;
    word-break: break-all;
    border: none;
    outline: none;
  }

  .editor:empty:before{
    content: attr(data-placeholder);
    color: #999;
    display: block; 
  }
  .editor:focus:before,
  .editor:not(:empty):before {
    content: none;
  }


  .notes-footer{
    --text-display: block;
    --icon-display: none;
    width: 100%;
    height: 30px;
    padding: 5px 10px;
    user-select: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    font-size: 12px;
  }

  .notes-footer.focus{
    --text-display: none;
    --icon-display: flex;
  }

  .footer-text{
    display: var(--text-display);
  }

  .footer-icon{
    display: var(--icon-display);
    width: 100%;
    height: 100%;
    align-items: center;
    user-select: none;
  }

  .footer-icon .btn-box{
    padding: 3px;
    font-size: 16px;
    margin-right: 5px;
    position: relative;
    cursor: pointer;
  }

  .color-picker{
    position: absolute;
    left: 0;
    bottom: calc(100% + 5px);
    width: 114px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    z-index: 8;
    display: none;
  }

  .color-picker div{
    width: 16px;
    height: 16px;
  }

  @media screen and (max-width: 400px) {
    .color-picker{
      left: auto;
      right: 0;
    }
  }

  .transparent{
    position: relative;

  }

  .transparent::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #ff0000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transform: rotate(45deg);
  }

  

</style>
<div class="notes-box">
  <div class="editor" contenteditable="true"  data-placeholder="请输入..."></div>
  <div class="notes-footer">
    <div class="footer-text">普通</div>
    <div class="footer-icon">
      <div class="btn-box" title="加粗"><icon-svg name="bold"></icon-svg></div>
      <div class="btn-box" title="斜体"><icon-svg name="italic"></icon-svg></div>
      <div class="btn-box" title="删除线"><icon-svg name="strikethrough"></icon-svg></div>
      <div class="btn-box" title="下划线"><icon-svg name="underline"></icon-svg></div>
      <div class="btn-box" title="字体颜色">
        <icon-svg name="font-color"></icon-svg>
        <div class="color-picker" name="font-color">
          <div style="background-color: #fff;"></div>
          <div style="background-color: #000;"></div>
          <div style="background-color: #ff0000;"></div>
          <div style="background-color: #ffa500;"></div>
          <div style="background-color: #ffff00;"></div>
          <div style="background-color: #00ff00;"></div>
          <div style="background-color: #00ffff;"></div>
          <div class="transparent" style="background-color: transparent;"></div>
        </div>
      </div>
      <div class="btn-box" title="背景颜色">
        <icon-svg name="bg-color"></icon-svg>
        <div class="color-picker" name="bg-color">
          <div style="background-color: #fff;"></div>
          <div style="background-color: #000;"></div>
          <div style="background-color: #ff0000;"></div>
          <div style="background-color: #ffa500;"></div>
          <div style="background-color: #ffff00;"></div>
          <div style="background-color: #00ff00;"></div>
          <div style="background-color: #00ffff;"></div>
          <div class="transparent" style="background-color: transparent;"></div>
        </div>
      </div>
    </div>
  </div>
</div> 
`;


export default class Notes extends HTMLElement {
  static observedAttributes = ["value"];
  constructor() {
    super();
    this.value = ``;
    this.focusIndex = undefined;
    let time;

    const command = {
      'bold': {
        cmd: 'bold'

      },
      'italic': {
        cmd: 'italic'
      },
      'strikethrough': {
        cmd: 'strikeThrough'
      },
      'underline': {
        cmd: 'underline'
      },
      'font-color': {
        cmd: 'foreColor'
      },
      'bg-color': {
        cmd: 'backColor'
      }
    }

    const shadow = this.attachShadow({ mode: "open" });
    const content = template.content.cloneNode(true); 

    const editor_el = content.querySelector('.editor');
    const footer_icon_el = content.querySelector('.footer-icon');

    editor_el.onfocus = () => {
      clearTimeout(time)
      this.shadowRoot.querySelector('.notes-footer').classList.add('focus');
    }

    editor_el.onblur = () => {
      time = setTimeout(()=>{
        this.shadowRoot.querySelector('.notes-footer').classList.remove('focus');
      },150)
    }

    editor_el.oninput = debounce(() => {
      this.value = editor_el.innerHTML;
      this.dispatchEventHandler();
    }, 500);

    footer_icon_el.onclick = (e) => {
      e.stopPropagation();
      editor_el.focus();
      this.shadowRoot.querySelectorAll('.color-picker').forEach(item => {
        item.style.display = 'none';
      })
      let name = e.target.getAttribute('name');
      if(!name)return;
      if(name === 'font-color' || name === 'bg-color'){
        let el = this.shadowRoot.querySelector(`div[name=${name}]`)
        el.style.display = 'flex';
        el.onclick = (e) => {
          e.stopPropagation();
          let color = e.target.style.backgroundColor;
          if(color === 'transparent'){
            document.execCommand('removeFormat', false, '');
          } else {
            document.execCommand(command[name].cmd, false, color);
          } 
          el.style.display = 'none';
          editor_el.focus();
        }
      }else{
        document.execCommand(command[name].cmd, false, '');
      }
      
    }

    document.onclick = (e) => {
      this.shadowRoot.querySelectorAll('.color-picker').forEach(item => {
        item.style.display = 'none';
      })
    }

    // editor_el.addEventListener('paste', function(event) {
    //   // 阻止默认的粘贴行为（包括任何格式化）
    //   event.preventDefault();
  
    //   // 获取剪贴板中的纯文本内容
    //   let clipboardData = event.clipboardData || window.clipboardData;
    //   let pastedText = clipboardData.getData('text/plain');
  
    //   // 插入纯文本内容
    //   document.execCommand('insertText', false, pastedText);
    // });

    shadow.appendChild(content);
  }

  renderList(){
    
    this.shadowRoot.querySelector('.editor').innerHTML = this.value;
  }

  dispatchEventHandler () {
    this.dispatchEvent(new CustomEvent("change", {
      detail: {
        value: this.value,
      },
    }));
  }

  connectedCallback () {
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if(name === 'value'){
      this.value = newValue;
      this.renderList();
    }
  }
  
}